<template>
	<view>
		<scroll-view style="height: 10%;max-height: 695px;" scroll-y="true">
		<view class="item">
			<h3>住院费用清单</h3>
			<ul>
				<li>
					<span class="left">阿西111111111111111111111111111111111111111111111111</span>
					<text>1盒</text>
					<span class="right">12.4元</span>
				</li>
				<li>
					<span class="left">阿西</span>
					<text>1盒</text>
					<span class="right">12.4元</span>
				</li>
				<li>
					<span class="left">阿西</span>
					<text>1盒</text>
					<span class="right">12.4元</span>
				</li>
				<li>
					<span class="left">阿西</span>
					<text>1盒</text>
					<span class="right">12.4元</span>
				</li>
				<li>
					<span class="left">阿西</span>
					<text>1盒</text>
					<span class="right">12.4元</span>
				</li>
				<li>
					<span class="left">阿西</span>
					<text>1盒</text>
					<span class="right">12.4元</span>
				</li>
			</ul>
		</view>
		<view class="doctor">
			<ul>
				<li>
					<span class="left">管床医生</span>
					<span class="right">张三</span>
				</li>
				<li>
					<span class="left">管床护士</span>
					<span class="right">李四</span>
				</li>
				<li>
					<span class="left">住院科室</span>
					<span class="right">内科</span>
				</li>
				<li>
					<span class="left">病床号</span>
					<span class="right">1-1-32</span>
				</li>
				<li>
					<span class="left">住院时间</span>
					<span class="right">2021-01-22 09:00:00</span>
				</li>
			</ul>
		</view>
		</scroll-view>
		<view class="footer" v-if="flag">
			<ul>
				<li>总计金额 <h3 class="right">123.00元</h3></li>
				<li><label>出院时间</label><span class="right">2021-01-22 09:00:00</span></li>
			</ul>
		</view>
		<view class="footer" v-else>
			<view class="money">合计 <h3>123.00元</h3></view>
			<button class="btn right">微信支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:true
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.item{
	
	width: 92%;
	background-color: #FFFFFF;
	display: flow-root;
	text-align: center;
	margin: 0 auto;
	margin-top: 10px;
	padding: 10px;
	border-radius: 8px;
}
.item h3{
	border-bottom: 1px solid #F0F0F0;
	padding: 10px;
	padding-bottom: 20px;
}
.item ul{
	margin-top: 20px;
}
.item ul li{
	height: 50px;
	line-height: 50px;
}
.item ul li .left{
	width:50%;
	max-height: 40px;
	overflow-y: hidden;
	display: -webkit-box;
	word-break: break-all;
	line-height: 20px;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-align: left;
}
.doctor{
	width: 92%;
	background-color: #FFFFFF;
	display: flow-root;
	margin: 0 auto;
	margin-top: 10px;
	border-radius: 8px;
	padding-left: 10px;
	padding-right: 10px;
}
.doctor ul{
	
}
.doctor ul li{
	float: left;
	width: 100%;
	border-bottom: 1px solid #F5F5F5;
	line-height: 65px;
}
.footer{
	display: flex;
	background: #FFFFFF;
	position: fixed;
	bottom: 0px;
	width: 90%;
	padding: 20px;
	line-height: 50px;
	box-shadow: -1px 0px 6px rgba(0, 0, 0, 0.16);
}
.footer ul{
	width: 100%;
}
.footer ul li{
	width: 100%;
}
.footer .btn{
	background-color: #3692FF;
	width: 142px;
	height: 46px;
	color: #FFFFFF;
	border-radius: 28px;
	margin-right: 30px;
}
.footer .money{
	display: flex;
}
.footer h3{
	margin-left: 10px;
	color:#3692FF;
}
</style>
